<template>

  <!--登录页有三个元素：1、背景 2、登录用的表格 3、注册用的表格-->
  <!--1、先将登录用的表格做出来-->
  <el-main>
    <el-row :gutter="10">
      <el-col :span="16">
        <!--这里的图片过渡用-->
        <img src="智启航图标.jpg" style=";height: 100%">
      </el-col>
      <el-col :span="8">
        <el-card style="margin-top: 80px;" v-show="loginVisable">
          <h3 style="text-align: center;">用户登录</h3>
          <el-form label-position="top">
            <el-form-item label="用户名">
              <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="messageVerifyLogin">短信验证登录</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="switchRegister">注册用户</el-button>
            </el-form-item>
          </el-form>
          <div style="color:#666;text-align: center;font-size: 14px;padding: 10px 0;">
            (体验账号: 密码:123456)
          </div>
        </el-card>

        <!--2、注册用表格 -->
        <el-card style="margin-top: 80px;" v-show="registerVisable">
          <h3 style="text-align: center;">用户注册</h3>
          <el-form label-position="top">
            <el-form-item label="用户名">
              <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="user.gender">
                <el-radio-button  :value="1" checked>男</el-radio-button>
                <el-radio-button  :value="0">女</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input placeholder="请输入年龄" v-model="user.age"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input placeholder="请输入11位手机号" v-model="user.phone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="registry">注册</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="switchLogin">切换登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>


      </el-col>
    </el-row>
  </el-main>



</template>

<script setup>

//
import {ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";

const loginVisable=ref(true);

//注册表格默认不显示，只有在登录的表格中点击了注册的按钮后才切换
const registerVisable=ref(false);

const user=ref({
  username:"",
  password:"",
  gender:"",
  age:"",
  phone:"",
});


//切换注册表格
const switchRegister=()=>{
  registerVisable.value=true;
  loginVisable.value=false;
}

//切换登录表格
const switchLogin=()=>{
  registerVisable.value=false;
  loginVisable.value=true;
}


//登录的点击事件
const login=()=>{
  //第一步先检测输入数据的合理性
  if(user.value.username.trim()=='')
  {
    ElMessage.warning("用户名非空!");
    return;
  }
  else if(user.value.password.trim()=='')
  {
    ElMessage.warning("密码不能为空!")
    return;
  }
  let data=qs.stringify(user.value);
  //登录功能这里映射的后端页面是一个查询方法，
  axios.get(BASE_URL+"/v1/login?"+data).then((response)=>{
    if(response.data.code==2000)
    {
      //这是查询成功的页面，查询成功要做的事
      //1、消息告知
      ElMessage.success("登录成功!");
      //2、通过localstorage来给本地的user持久性赋值，让全局性的user保持有数据
      localStorage.setItem("user",response.data.data);
      //3、跳转至登录成功的首页
    }
    else {
      //直接在后端告诉用户密码错误，如果由前端来写，请后端告知
      ElMessage.error(response.data.msg);
    }
  })
}


//注册用户的点击事件
const registry=()=>{
  //注意下方的axios的url应该跟login不同，注意还在传送请求之前还需要加一个验证，手机号等是否符合规范
  //1.在前端直接先检查号码合理不合理
  if(user.value.username.trim()=='')
  {
    ElMessage.warning("用户名非空!");
    return;
  }
  else if(user.value.password.trim()=='')
  {
    ElMessage.warning("密码不能为空!")
    return;
  }
  else if(user.value.phone.trim().length!=11)
  {
    ElMessage.warning("手机号码必须为11位!");
    return;
  }
  else if(user.value.age>18 && user.value.age<60)
  {
    ElMessage.warning("请填写合理的用户年龄!");
    return;
  }
  let data=qs.stringify(user.value);
  console.log(data)
  //前端的注册应该对应后端的插入
  axios.post(BASE_URL+"/v1/user/registry",data).then((response)=>{
    if(response.data.code==2000)
    {
      //如果注册成功之后自动保持登录状态，这里可以直接调用之前的登录算法，反正user都是同一个
      ElMessage.success("注册成功!");
      login();
      //跳转页面至登录后的首页，这个在login中已有，所以不用写了
    }
    else {
      ElMessage.error(response.data.msg);
    }
  });
}

//短信验证登录的前端接口
const messageVerifyLogin=()=>{
  console.log("这里是短信验证的接口处")
}

</script>


<style scoped>

</style>